<template>
  <div>
    <el-table :data="datalist" :row-style="{ color: '#FF6A6A' }" :fit="true">
      <el-table-column
        align="center"
        prop="createName"
        label="创建人"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="changeName"
        label="修改人"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="title"
        label="标题"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="mood"
        label="心情"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
      ></el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
            @click="detailFun(scope.$index, scope.row)"
            plain
            type="primary"
            size="mini"
            >详细信息</el-button
          >
          <el-button
            @click="removeFun(scope.$index, scope.row)"
            plain
            type="danger"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align:center;margin-top:30px;"
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :page-size="findData.size"
      :page-count="findData.pages"
      :current-page="findData.skip"
      :total="findData.total"
    >
    </el-pagination>
    <el-dialog title="详细信息" v-model="findDetais" width="36%" center>
      <div class="userBox">
        <div class="username">
          <el-input
            class="name"
            placeholder="请输入内容"
            v-model="rowData[0].title"
            disabled
          >
            <template #prepend>标题：</template>
          </el-input>
        </div>
        <div class="username">
          <el-input
            class="name"
            placeholder="请输入内容"
            v-model="rowData[0].createName"
            disabled
          >
            <template #prepend>昵称：</template>
          </el-input>
        </div>
        <div class="username">
          <el-input
            class="name"
            placeholder="请输入内容"
            v-model="rowData[0].mood"
            disabled
          >
            <template #prepend>状态：</template>
          </el-input>
        </div>
        <div class="username">
          <el-input
            class="name"
            placeholder="请输入内容"
            v-model="rowData[0].createTime"
            :disabled="userinfo.limit == 0 && isChange"
          >
            <template #prepend>创建时间：</template>
          </el-input>
        </div>
        <div class="username" style="height: auto">
          <el-input
            class="name"
            type="textarea"
            rows="6"
            placeholder="请输入内容"
            v-model="rowData[0].content"
            :disabled="isChange"
          >
          </el-input>
        </div>
        <div class="username" style="justify-content: space-around">
          <span class="name">修改人：{{ rowData[0].changeName }}</span>
          <span class="name">修改时间：{{ rowData[0].changeTime }}</span>
        </div>
        <div class="username" style="height: auto">
          <el-input
            class="name"
            type="textarea"
            rows="2"
            placeholder="修改原因"
            v-model="rowData[0].isChange"
            :disabled="isChange"
          >
          </el-input>
        </div>
        <div class="username" style="justify-content: center; border: 0">
          <span
            class="name"
            style="color: pink"
            @click="isChangeFun(rowData[0].user)"
            >有 你 真 好</span
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, toRefs } from "vue";
import dataListJS from "./dataList.js";
export default {
  name: "userlist",
  setup() {
    let {
      status,
      datalist,
      methodFun: { getUserData, isChangeFun, detailFun, removeFun, changePage },
    } = dataListJS();
    let { findData, findDetais, isChange, rowData, userinfo } = toRefs(status);
    onMounted(() => {
      getUserData();
    });
    return {
      getUserData,
      isChangeFun,
      detailFun,
      removeFun,
      changePage,
      findData,
      findDetais,
      isChange,
      datalist,
      rowData,
      userinfo,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table {
  background-color: transparent;
}

/deep/.el-table th,
.el-table tr {
  background-color: transparent !important;
}
.userBox {
  display: flex;
  flex-wrap: wrap;
  height: auto !important;
  align-items: flex-start;
  .username {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .name {
      margin-left: 12px;
    }
    .change {
      width: 50px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      font-size: 14px;
      color: #ff6eb4;
      border: 1px solid #ff6eb4;
      margin-right: 12px;
      margin-left: 12px;
      cursor: pointer;
    }
  }
}
</style>
